<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="__PUBLIC__/layui/css/layui.css"  media="all">
  <link rel="stylesheet" href="__PUBLIC__/font-awesome/css/font-awesome.min.css" media="all" />
  <link rel="stylesheet" href="__CSS__/admin.css"  media="all">
</head>
<body style="padding:10px;">
  <div class="tplay-body-div">
    <div class="layui-tab">
      <ul class="layui-tab-title">
        <li><a href="{:url('admin/goods/index')}" class="a_menu">商品管理</a></li>
        <li class="layui-this">新增商品</li>
      </ul>
    </div>
    <div style="margin-top: 20px;">
    </div>
    <form class="layui-form" id="admin">

      <div class="layui-form-item">
        <label class="layui-form-label">商品分类</label>
        <div class="layui-input-block" style="max-width:600px;">
          <select  name="category_id" lay-search="" lay-verify="required">
            <option value="">请选择商品分类</option>
            {volist name="$category" id="vo"}
            <option value="{$vo.id}" {notempty name="$info.category_id" }{eq name="$info.category_id" value="$vo.id" } selected="" {/eq}{/notempty}>{$vo.name}</option>
            {/volist}
          </select>
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">商品标题</label>
        <div class="layui-input-block" style="max-width:600px;">
          <input name="goods_name" lay-verify="required" autocomplete="off" placeholder="请输入商品标题" class="layui-input" type="text" {notempty name="$info.goods_name"}value="{$info.goods_name}"{/notempty}>
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">划线价格</label>
        <div class="layui-input-block" style="max-width:600px;">
          <input name="line_price" lay-verify="required" autocomplete="off" placeholder="请输入划线价格" class="layui-input" type="text" {notempty name="$info.line_price"}value="{$info.line_price}"{/notempty}>
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">商品售价</label>
        <div class="layui-input-block" style="max-width:600px;">
          <input name="goods_price" lay-verify="required" autocomplete="off" placeholder="请输入商品售价" class="layui-input" type="text" {notempty name="$info.goods_price"}value="{$info.goods_price}"{/notempty}>
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">初始化销量</label>
        <div class="layui-input-block" style="max-width:600px;">
          <input name="sales_initial" lay-verify="required" autocomplete="off" placeholder="请输入初始化销量" class="layui-input" type="text" {notempty name="$info.sales_initial"}value="{$info.sales_initial}"{/notempty}>
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">实际销量</label>
        <div class="layui-input-block" style="max-width:600px;">
          <input name="sales_actual" lay-verify="required" autocomplete="off" placeholder="请输入实际销量" class="layui-input" type="text" {notempty name="$info.sales_actual"}value="{$info.sales_actual}"{/notempty}>
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">排序</label>
        <div class="layui-input-block" style="max-width:600px;">
          <input name="sort" lay-verify="required" autocomplete="off" placeholder="请输入排序" class="layui-input" type="text" {notempty name="$info.sort"}value="{$info.sort}"{/notempty}>
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">商品描述</label>
        <div class="layui-input-block" style="max-width:600px;">
          <textarea name="goods_desc" lay-verify="required" autocomplete="off" placeholder="请输入描述" class="layui-input" type="text" >{notempty name="$info.goods_desc"}{$info.goods_desc}{/notempty}</textarea>
        </div>
      </div>
      <div class="layui-upload" id="upload-thumb">
        <label class="layui-form-label">封面</label>
        <button type="button" class="layui-btn" id="thumb">上传图片</button>
        <div class="layui-upload-list">
          <label class="layui-form-label"></label>
          <img  class="layui-upload-img" id="demo1" width="150" height="150" {notempty name="$info.goods_image"}src="{$info.goods_image}"{/notempty}>{notempty name="$info.goods_image"}<input type="hidden" name="goods_image" value="{$info.goods_image}">{/notempty}
          <p id="demoText"></p>
        </div>
      </div>
      {notempty name="$info.goods_images"}
      <div class="layui-form-item" id="pics">
        <div class="layui-form-label">商品图片</div>
        <div class="layui-input-block" style="width: 70%;">
          <div class="layui-upload">
            <button type="button" class="layui-btn layui-btn-primary pull-left" id="book-images">选择多图</button>
            <div class="pic-more">
              <ul class="pic-more-upload-list" id="book-images-priview">
                {foreach name="$info.goods_images" item="vo" key="k"}
                <li class="item_img" style="float:left;">
                  <div class="operate"><i class="toleft layui-icon"></i><i class="toright layui-icon"></i><i class="close layui-icon"></i></div>
                  <img src="{$vo}" style="width: 100px;height: 100px" class="img" >
                  <input type="hidden" name="goods_images[]" value="{$vo}" />
                </li>
                {/foreach}
              </ul>
            </div>
          </div>
        </div>
      </div>
      {/notempty}
      {empty name="$info.goods_images"}
      <div class="layui-form-item" id="pics">
        <div class="layui-form-label">商品图片</div>
        <div class="layui-input-block" style="width: 70%;">
          <div class="layui-upload">
            <button type="button" class="layui-btn layui-btn-primary pull-left" id="book-images">选择多图</button>
            <div class="pic-more">
              <ul class="pic-more-upload-list" id="book-images-priview">
              </ul>
            </div>
          </div>
        </div>
      </div>
      {/empty}
    <div class="layui-form-item layui-form-text">
      <label class="layui-form-label">内容</label>
      <div class="layui-input-block" style="max-width:1000px;">
        <textarea id="content" placeholder="输入封面内容" class="layui-textarea" name="content">{notempty name="$info.content"}{$info.content}{/notempty}</textarea>
      </div>
    </div>

      {notempty name="$info"}
      <input type="hidden" name="id" value="{$info.id}">
      {/notempty}
      <div class="layui-form-item">
        <div class="layui-input-block">
          <button class="layui-btn" lay-submit lay-filter="admin">立即提交</button>
          <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
      </div>

    </form>

    <script src="__PUBLIC__/layui/layui.js"></script>
    <script src="__PUBLIC__/jquery/jquery.min.js"></script>
    <!-- 配置文件 -->
    <script type="text/javascript" src="__PUBLIC__/ueditor/ueditor.config.js"></script>
    <!-- 编辑器源码文件 -->
    <script type="text/javascript" src="__PUBLIC__/ueditor/ueditor.all.js"></script>
    <script type="text/javascript">
      var ue = UE.getEditor('content');
    </script>




    <script>
      layui.use('upload', function(){
        var upload = layui.upload;
        //执行实例
        var uploadInst = upload.render({
          elem: '#thumb' //绑定元素
          ,url: "{:url('admin/common/upload')}" //上传接口
          ,data:{use:'courseware_thumb'}
          ,done: function(res){
            //上传完毕回调
            if(res.code == 2) {
              $('#demo1').attr('src',res.src);
              $('#upload-thumb').append('<input type="hidden" name="goods_image" value="'+ res.src +'">');
            } else {
              layer.msg(res.msg);
            }
          }
          ,error: function(){
            //请求异常回调
            //演示失败状态，并实现重传
            var demoText = $('#demoText');
            demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
            demoText.find('.demo-reload').on('click', function(){
              uploadInst.upload();
            });
          }
        });
      });

      layui.use('upload', function(){
        var $ = layui.jquery;
        var upload = layui.upload;
        upload.render({
          elem: '#book-images',
          url: "{:url('admin/common/upload')}",
          size: 500,
          exts: 'jpg|png|jpeg',
          multiple: true,
          before: function(obj) {
            layer.msg('上传中...', {
              icon: 16,
              shade: 0.01,
              time: 0
            })
          },
          done: function(res) {
            layer.close(layer.msg());//关闭上传提示窗口
            if(res.code == 2) {
              $('#book-images-priview').append('<li class="item_img" style="float:left;"><div class="operate"><i class="toleft layui-icon"></i><i class="toright layui-icon"></i><i  class="close layui-icon"></i></div><img style="width: 100px;height: 100px" src="'+ res.src +'"class="img" ><input type="hidden" name="goods_images[]" value="' + res.src + '" /></li>');
            }
            //$('#hand_images-priview').append('<input type="hidden" name="pc_src[]" value="' + res.filepath + '" />');

          }
        });
      });
      //点击多图上传的X,删除当前的图片
      $("body").on("click",".close",function(){
        $(this).closest("li").remove();
      });
      //多图上传点击<>左右移动图片
      $("body").on("click",".pic-more ul li .toleft",function(){
        var li_index=$(this).closest("li").index();
        if(li_index>=1){
          $(this).closest("li").insertBefore($(this).closest("ul").find("li").eq(Number(li_index)-1));
        }
      });
      $("body").on("click",".pic-more ul li .toright",function(){
        var li_index=$(this).closest("li").index();
        $(this).closest("li").insertAfter($(this).closest("ul").find("li").eq(Number(li_index)+1));
      });
    </script>
    <script>
      layui.use(['layer', 'form'], function() {
          var layer = layui.layer,
              $ = layui.jquery,
              form = layui.form;
          $(window).on('load', function() {
              form.on('submit(admin)', function(data) {
                  $.ajax({
                      url:"{:url('admin/goods/publish')}",
                      data:$('#admin').serialize(),
                      type:'post',
                      async: false,
                      success:function(res) {
                          if(res.code == 1) {
                              layer.alert(res.msg, function(index){
                                location.href = res.url;
                              })
                          } else {
                              layer.msg(res.msg);
                          }
                      }
                  })
                  return false;
              });
          });
      });
    </script>

  </div>
</body>
</html>